import {Navigate,useRoutes}from 'react-router-dom'
import Login from '../components/Login'
import Main from '../components/Main'
import NotFound from '../components/404'
import Home from '../components/Main/Home'
import About from '../components/Main/About'
import Music from '../components/Main/Home/Music'
import News from '../components/Main/Home/News'

//把他们分别引入进来
const routes =[
    {
        path:"/login",
        element:<Login/>,
    },
    {
        path: "/main",
        element: <Main />,
        children:[
          {
            path:"/main/home",
            element:<Home/>,
            children:[
              {
                path:"/main/home/music",
                element:<Music/>
              },
              {
                path:"/main/home/news",
                element: <News/>
              },
            ]
          },
          {
            path:"/main/about",
            element:<About/>
          },
        ]
      },
    //这个是路由导航
    {
        path:"/",
        element:<Navigate to="/login"/>
    },
    {
        path:"*",
        element:<NotFound/>
    },
]
// 让这个出口默认是routes;
    export default routes;

    // 这样的写法，认为定义了GetRoutes组件，这个组件就是根据路由表生成的，路由配置结构
    export const GetRoutes =()=>{
        // 在组件中的外层可以使用hook
        return useRoutes(routes)
    }

    // 自定义hooks
    export const useMyRoutes =()=>{
        // 在自定义hooks中是可以使用hook
        return useRoutes (routes)
    }